import { useEffect, useState } from 'react'
import { Outlet, useRoutes, useLocation, useNavigate } from "react-router-dom";
import Test_ from '@/components/test'
import Comp from '@/components/Comp'

import router from './router/路由表'
import {message} from 'antd'


function ToLogin(){  // 前往登录页
  const navigateTo = useNavigate()

  useEffect(()=>{  // 加载完组件之后跳转
    navigateTo("/login") 
    message.warning('请先登录后再访问！')
  },[])
  return <div></div>
}
function ToPage1(){  // 前往首页
  const navigateTo = useNavigate()

  useEffect(()=>{  // 加载完组件之后跳转
    navigateTo("/page1") 
  },[])
  return <div></div>
}



function BeforeRouterEnter(){
  const outlet = useRoutes(router);  // 使用路由表

    
    /*
    后台管理系统两种经典的跳转情况：
    1、如果访问的是登录页面， 并且有token， 跳转到首页
    2、如果访问的不是登录页面，并且没有token， 跳转到登录页
    3、其余的都可以正常放行
  */
    const location = useLocation()
    let token = localStorage.getItem("lege-react-management-token") ? true :false ;
    //1、如果访问的是登录页面， 并且有token， 跳转到首页
    if(location.pathname==="/login" && token){
      // 这里不能直接用 useNavigate 来实现跳转 ，因为需要BeforeRouterEnter是一个正常的JSX组件
      return <ToPage1 />
    }
    //2、如果访问的不是登录页面，并且没有token， 跳转到登录页
    if(location.pathname!=="/login" && !token){
      return <ToLogin />
    }

    return outlet
}








function App() {
  const [count, setCount] = useState(0)
  // const outlet = useRoutes(router)


  return (
    <>
      {/* 顶层APP
      <Test_></Test_>
      <Comp></Comp>

      <hr></hr> */}

      {/* 普通路由写法 */}
      {/* <Outlet></Outlet> */}

      {/* 路由表写法 */}
      {/* {outlet} */}

      {/* 手动封装前置路由守卫 */}
      <BeforeRouterEnter></BeforeRouterEnter>
    </>
  )
}

export default App
